<template>
  <el-dialog
    title="监听器参数"
    v-model="dialogVisible"
    width="700px"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    @closed="$emit('close', formData.paramList)"
  >
    <div class="flex flex-row items-center mb-2">
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </div>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="0">
      <el-table :data="formData.paramList">
        <el-table-column label="类型" width="180" align="center">
          <template #default="{ row, $index }">
            <el-form-item
              :prop="'paramList.' + $index + '.type'"
              :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }"
            >
              <el-select v-model="row.type">
                <el-option label="字符串" value="stringValue" />
                <el-option label="表达式" value="expression" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="180" align="center">
          <template #default="{ row, $index }">
            <el-form-item
              :prop="'paramList.' + $index + '.name'"
              :rules="{ required: true, message: '请输入', trigger: ['blur', 'change'] }"
            >
              <el-input v-model="row.name" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="值" align="center">
          <template #default="{ row, $index }">
            <el-form-item
              :prop="'paramList.' + $index + '.value'"
              :rules="{ required: true, message: '请输入', trigger: ['blur', 'change'] }"
            >
              <el-input v-model="row.value" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="60">
          <template #default="{ $index }">
            <el-icon size="26" color="red" @click="handleDel($index)">
              <CircleCloseFilled />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ref, defineProps } from 'vue';

  const props = defineProps({
    value: {
      type: Array,
      default: () => [],
    },
  });

  const dialogVisible = ref(true);
  const formRef = ref(null);
  const formData = ref({
    paramList: props.value,
  });
  const formRules = ref({});

  function handleAdd() {
    formData.value.paramList.push({
      type: null,
      name: null,
      value: null,
    });
  }

  function handleDel(idx) {
    formData.value.paramList.splice(idx, 1);
  }

  function closeDialog() {
    formRef.value.validate((valid) => {
      if (valid) {
        dialogVisible.value = false;
      }
    });
  }
</script>

<style scoped lang="scss"></style>
